<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Layui布局</title>
        <!-- 引入Layui的核心css文件       -->
        <link rel="stylesheet" type="text/css" href="../layui-lib/layui/css/layui.css">
        <!--   layui的核心js文件(采用模块化引入)     -->
        <script src="../layui-lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--
         布局容器:
            1.固定宽度 (两侧有留白效果)
            2.完整宽度 (占据屏幕宽度的id)
         -->
        <!--   固定宽度(两侧有留白效果)     -->
        <div class="layui-container" style="background-color: navajowhite;height: 300px">
            固定宽度
        </div>
        <!--   完整宽度(占据屏幕宽度的100%)-->
        <div class="layui-fluid" style="background-color: cyan; height: 300px;">
            完整宽度
        </div>
        <!--    栅格系统
            为了丰富网页布局，简化HTML/CSS代码的耦合，并提升多终端的适配能力，layui引进了一套具备响应式
            能力的栅格系统，将容器进行了12等分，预设了4*12中CSS排列类，它们在移动设备，平板，桌面中/大尺寸四
            种不同的屏幕下发挥着各自的作用。
            -->
        <!--     栅格布局规则
            1.采用layui-row来定义行,如:
        -->
        <div class="layui-row"></div>
        <!--
            2.采用类似layui-col-md 这样的预设类来定义一组列(column),且放在行(row)内，其中:
                变量md代表的是不同屏幕下的标记
                变量*代表的是该列所占用的12等分数(如6/12),可选值1-12
                如果多个列的等分数值总和等于12，则刚好满行排列，如果大于12，多余的列将自动另起一行。
            3.列可以同时出现最多四种不同的组合，分别是: xs(超小屏幕，如手机),sm(小屏幕，如平板),md(桌面中等屏幕),lg(桌面大型屏幕)。
            4.可对列追加类似layui-col-space5,layui-col-md-offset3这样的预设类来定义列的间距和偏移。
            5.可以在列(column)元素中放入你自己的任意元素填充内容。
          -->
    </body>
</html>